<template>
    <div class="PersonalCenter">
        <div style="width: 100%;height: 160px">
            <el-row :gutter="10">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <div style="overflow: hidden">
                            <el-image fit="cover" :src="user.userFace"
                                      style="height:160px;margin:auto;display: block;"/>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple-light">
                        <h2 class="j-name">
                                <span style="border-right: 1px solid;padding: 0 10px;margin-right: 10px;">{{
                                    user.name
                                    }}</span>
                            <i class="el-icon-male" v-if="user.sex == '男'" style="color: #409eff"/>
                            <i class="el-icon-female" v-else style="color: #f7acbc"/>
                        </h2>
                    </div>
                </el-col>
                <el-col :span="2">

                    <el-button
                            type="medium"
                            round
                            @click="goSetting"
                            style="float: right">
                        个人设置
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <el-button class="el-icon-plus" round style="width: 100%;margin: 10px 0;" @click="dialogVisible = true">新增
        </el-button>
        <user-article style="width: 100%;height: calc(100% - 170px)"/>

        <el-dialog
                :append-to-body="true"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                width="40%">
            <rich-text/>
        </el-dialog>
    </div>
</template>

<script>
// import {mapState} from "vuex";
// import personalCenter from "../../../components/personal/personalCenter";
// import RichText from "./components/richText/richText";
// import ArticleContent from "../../components/articleContent/articleContent";

import RichText from "@/views/home/compoents/compoents/richText.vue";
import MainArticle from "@/views/modules/article/mainArticle.vue";
import UserArticle from "@/views/home/compoents/compoents/userArticle/userArticle.vue";

export default {
    name: "PersonalCenter",
    components: {
        UserArticle,
        MainArticle,
        RichText
        // ArticleContent,
        // RichText,
        // personalCenter
    },
    data() {
        return {
            //用户信息
            user: this.$store.getters.app.userInfo,
            activeName: "basicSettings",
            dialogVisible: false,
        }
    },

    // computed: {
    //     ...mapState({
    //         user: state => state.user,
    //         timeServiceApi: state => state.timeServiceApi,
    //     }),
    // },
    methods: {
        outRichText(data) {
            this.dialogVisible = false
        },
        goSetting() {
            this.$router.replace('/modules/sys/sysAdmin')
        }
    }
}
</script>

<style scoped>
.PersonalCenter {
    width: 100%;
    height: 100%;
    margin: auto;
    background: #ffffff;
    padding: 10px 10px 20px 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 26%)
}

::v-deep .el-tabs--border-card {
    background: #FFF;
    border: 0px solid #DCDFE6;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
}

::v-deep .el-tabs--border-card > .el-tabs__header {
    background-color: #F5F7FA;
    border: 1px solid #E4E7ED;
    margin: 0;
}
</style>